<template>
  <view class="navBarWrap">
    <view class="statusBar" :style="{height:statusBarHeight+'px',backgroundColor:statusBarBg}"></view>
    <view class="status_placeholder" :style="{height:statusBarHeight+'px'}"></view>
    <view
      class="navBar"
      :class="{'isFixed':isFixed}"
      :style="{height:navBarHeight+'px',top:statusBarHeight+'px',backgroundColor:navBarBg}"
    >
      <view class="navText" v-if="isText">
        <text
          class="navText_backIcon"
          v-show="isBack"
          :style="{color:backColor}"
          @click="goBack"
        >&#xe61f;</text>
        <slot>
          <text class="navText_content" :style="{color:titleColor}">{{title}}</text>
        </slot>
      </view>
      <view class="navSearch" v-else @click="toSearch">
        <text class="navSearch_searchIcon">&#xe634;</text>
        <text class="navSearch_searchText">{{searchText}}</text>
      </view>
    </view>
    <view class="nav_placeholder" v-if="showPlaceholder" :style="{height:navBarHeight+'px'}"></view>
  </view>
</template>

<script>
import { mixin } from '@/common/mixin/index'
export default {
  name: "NavBar",
  mixins: [mixin],
  props: {
    statusBarBg: {
      type: String,
      default: 'rgb(31, 182, 131)'
    },
    navBarBg: {
      type: String,
      default: 'rgb(31, 182, 131)'
    },
    isBack: {
      type: Boolean,
      default: true
    },
    backCount: {
      type: Number,
      default: 1
    },
    backColor: {
      type: String,
      default: '#fff'
    },
    isText: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    },
    titleColor: {
      type: String,
      default: '#fff'
    },
    searchText: {
      type: String,
      default: '请输入您要搜索的内容'
    },
    isFixed: {
      type: Boolean,
      default: false
    },
    showPlaceholder: {
      type: Boolean,
      default: true
    },
    comeFrom: {
      type: String,
      default: ''
    }
  },
  methods: {
    goBack () {
      uni.navigateBack({
        delta: this.backCount
      })
    },
    toSearch () {
      uni.navigateTo({
        url: `/subcom-home/Search/Search?comeFrom=${this.comeFrom}`
      })
    }
  }
}
</script>


<style lang="scss" scoped>
.statusBar {
  width: 750rpx;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.status_placeholder {
  width: 750rpx;
}
.navBar {
  width: 750rpx;
  position: absolute;
  left: 0;
  z-index: 998;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.isFixed {
  position: fixed;
}
.navText {
  width: 750rpx;
  height: 60rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 0 20rpx;
  /* #ifndef APP-NVUE */
  box-sizing: border-box;
  /* #endif */
  &_backIcon {
    font-size: 36rpx;
    font-family: iconfont;
    position: absolute;
    left: 20rpx;
    top: 12rpx;
  }
  &_content {
    font-size: 32rpx;
    font-weight: bold;
  }
}

.navSearch {
  width: 710rpx;
  /* #ifdef MP-WEIXIN */
  width: 500rpx;
  /* #endif */
  height: 60rpx;
  border-radius: 10rpx;
  background-color: rgba(210, 233, 225, 0.4);
  padding: 0 10rpx;
  /* #ifndef APP-NVUE */
  box-sizing: border-box;
  /* #endif */
  margin-left: 20rpx;
  display: flex;
  flex-direction: row;
  &_searchIcon,
  &_searchText {
    line-height: 60rpx;
    font-family: iconfont;
    font-size: 26rpx;
    color: rgb(226, 226, 226);
    margin-right: 10rpx;
  }
}
.nav_placeholder {
  width: 750rpx;
  // background-color: red;
}
</style>
